﻿.fluent-presence-badge {
    position: relative;
    display: inline-block;
    --fluent-presence-badge-border-size: 2px;
}

    .fluent-presence-badge ::deep *:first-child {
        display: block;
    }

    .fluent-presence-badge ::deep > img {
        border-radius: 999px;
        aspect-ratio: 1 / 1;
    }

    .fluent-presence-badge ::deep .status {
        display: block;
        position: absolute;
        background-color: var(--neutral-layer-1);
        bottom: calc(-1 * var(--fluent-presence-badge-border-size));
        right: calc(-1 * var(--fluent-presence-badge-border-size));
        border-radius: 999px;
        border: var(--fluent-presence-badge-border-size) solid var(--neutral-layer-1);
    }
